<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <script>
        function checkForm() {
            const content = document.forms[0].content.value;
            if (content.trim() === "") {
                alert("留言内容不能为空");
                return false;
            }
            return true;
        }

        function confirmDelete() {
            return confirm("确定要删除这条留言吗?");
        }
    </script>
    <style>
        :root {
            --primary-color: #4e7de4;
            --secondary-color: #eef2ff;
            --text-color: #333;
            --light-gray: #f5f7fa;
            --border-color: #e1e4e8;
            --success-color: #10b981;
            --danger-color: #ef4444;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--light-gray);
            color: var(--text-color);
            line-height: 1.6;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        h1 {
            text-align: center;
            color: var(--primary-color);
            font-weight: 600;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--secondary-color);
            margin: 20px 0;
        }

        form {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
        }

        textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            resize: vertical;
            font-size: 16px;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(78, 125, 228, 0.2);
        }

        input[type="submit"] {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 15px;
            transition: background-color 0.3s;
        }

        input[type="submit"]:hover {
            background-color: #3968cf;
        }

        hr {
            border: none;
            height: 1px;
            background-color: var(--border-color);
            margin: 20px 0;
        }

        ul {
            list-style-type: none;
            max-height: 400px;
            overflow-y: auto;
            padding-right: 5px;
            margin-bottom: 20px;
            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;
        }

        ul::-webkit-scrollbar {
            width: 6px;
        }

        ul::-webkit-scrollbar-track {
            background: transparent;
        }

        ul::-webkit-scrollbar-thumb {
            background-color: var(--border-color);
            border-radius: 3px;
        }

        ul::-webkit-scrollbar-thumb:hover {
            background-color: #ccc;
        }

        li {
            background-color: white;
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            margin-bottom: 15px;
            position: relative;
            transition: transform 0.2s, box-shadow 0.2s;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        li:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
        }

        .message-content {
            flex: 1;
            margin-right: 10px;
        }

        .message-actions {
            display: flex;
            gap: 10px;
        }

        .action-btn {
            text-decoration: none;
            padding: 5px 15px;
            border-radius: 4px;
            font-size: 14px;
            transition: background-color 0.3s, color 0.3s;
            min-width: 60px;
            text-align: center;
        }

        .edit-btn {
            color: var(--success-color);
            border: 1px solid var(--success-color);
        }

        .edit-btn:hover {
            background-color: var(--success-color);
            color: white;
        }

        .delete-btn {
            color: var(--danger-color);
            border: 1px solid var(--danger-color);
        }

        .delete-btn:hover {
            background-color: var(--danger-color);
            color: white;
        }

        .pagination-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            padding: 0 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .pagination {
            display: flex;
            align-items: center;
        }

        .pagination a, .pagination span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin: 0 3px;
            color: var(--text-color);
            text-decoration: none;
            border-radius: 50%;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .pagination a:hover {
            background-color: var(--secondary-color);
            color: var(--primary-color);
        }

        .pagination .active {
            background-color: var(--primary-color);
            color: white;
            box-shadow: 0 2px 8px rgba(78, 125, 228, 0.3);
        }

        .pagination .disabled {
            color: #ccc;
            cursor: not-allowed;
            pointer-events: none;
        }

        .pagination .nav-btn {
            width: auto;
            padding: 0 15px;
            border-radius: 20px;
            background-color: var(--light-gray);
            margin: 0 5px;
        }

        .pagination .nav-btn:hover {
            background-color: var(--secondary-color);
        }

        .per-page-display {
            display: flex;
            align-items: center;
            font-size: 14px;
            white-space: nowrap;
            color: var(--text-color);
        }

        .per-page-display select {
            margin: 0 8px;
            padding: 8px 30px 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            background-color: var(--light-gray);
            -webkit-appearance: menulist;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .per-page-display select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(78, 125, 228, 0.2);
        }

        .page-info {
            margin-right: 15px;
            color: #666;
            font-size: 14px;
        }

        .empty-message {
            text-align: center;
            color: #888;
            margin: 40px 0;
            font-style: italic;
        }

        @media (max-width: 600px) {
            body {
                padding: 10px;
            }

            form, li {
                padding: 15px;
            }

            input[type="submit"] {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<h1>留言板</h1>
<form action="{{ url_for('add_message') }}" method="post" onsubmit="return checkForm()">
    <label>
        <textarea name="content" rows="4" cols="50" placeholder="请输入留言内容..."></textarea>
    </label>
    <br>
    <input type="submit" value="提交留言">
</form>
<hr>

{% if messages|length > 0 %}
    <ul>
        {% for message in messages %}
            <li>
                <div class="message-content">{{ message[1] }}</div>
                <div class="message-actions">
                    <a href="{{ url_for('edit_message', message_id=message[0]) }}" class="action-btn edit-btn">修改</a>
                    <a href="{{ url_for('delete_message', message_id=message[0]) }}" onclick="return confirmDelete()"
                       class="action-btn delete-btn">删除</a>
                </div>
            </li>
        {% endfor %}
    </ul>
{% else %}
    <div class="empty-message">暂无留言，来发表第一条吧！</div>
{% endif %}

<div class="pagination-container">
    <div class="pagination">
        {% if page > 1 %}
            <a href="{{ url_for('index', page=page - 1, per_page=per_page) }}" class="nav-btn">上一页</a>
        {% else %}
            <span class="nav-btn disabled">上一页</span>
        {% endif %}

        {% set start = [1, page - 2]|max %}
        {% set end = [total_pages, page + 2]|min %}

        {% if start > 1 %}
            <a href="{{ url_for('index', page=1, per_page=per_page) }}">1</a>
            {% if start > 2 %}
                <span>...</span>
            {% endif %}
        {% endif %}

        {% for p in range(start, end + 1) %}
            {% if p == page %}
                <span class="active">{{ p }}</span>
            {% else %}
                <a href="{{ url_for('index', page=p, per_page=per_page) }}">{{ p }}</a>
            {% endif %}
        {% endfor %}

        {% if end < total_pages %}
            {% if end < total_pages - 1 %}
                <span>...</span>
            {% endif %}
            <a href="{{ url_for('index', page=total_pages, per_page=per_page) }}">{{ total_pages }}</a>
        {% endif %}

        {% if page < total_pages %}
            <a href="{{ url_for('index', page=page + 1, per_page=per_page) }}" class="nav-btn">下一页</a>
        {% else %}
            <span class="nav-btn disabled">下一页</span>
        {% endif %}
    </div>

    <div class="per-page-display">
        <span class="page-info">第 {{ page }}/{{ total_pages }} 页</span>
        每页显示
        <form id="perPageForm" method="get" action="{{ url_for('index') }}"
              style="display: inline; margin: 0;">
            <label>
                <select name="per_page" onchange="this.form.submit()">
                    {% for option in rows_options %}
                        <option value="{{ option }}"
                                {% if per_page == option %}selected{% endif %}>{{ option }}</option>
                    {% endfor %}
                </select>
            </label>
            <input type="hidden" name="page" value="1">
        </form>
        条
    </div>
</div>
</body>
</html>
